Web Basic Skills

网络

HTML(HyperText Markup Language)、CSS和Javascript

​ 对于一个网页而言，主要由 HTML、CSS和Javascript组成。其中HTML主要负责网页框架的搭建，CSS主要负责网页的样式而JavaScript主要负责网页的行为。

常用的HTML标签

  1. <html></html>

    这个标签没什么用，但是所有HTML标签都需要写在这个标签内部

  2. <head></head>

    head标签是用来写一些给浏览器看的内容，包括网站名，网站描述等

    head内部常用的标签

    • meta标签

      1
      2
      3
      4
      <meta charset="utf-8">  <!--申明网页的编码格式-->
      <!--utf-8为编码字符集-->
      <meta name="keywords" content="xx"><!--描述网页的类别，给网络爬虫看的信息-->
      <meta name="description" content="xx"><!--对网页的描述，也是给爬虫看的信息-->
 常用的字符编码有：

 - gb2312(包括亚裔字符集)
 - gbk(在gb2312基础上增加了繁体中文)
 - unicode(万国码)title标签

  • title标签

    1
    <title>    这里可以写标题（浏览器上方显示的）</title>

  1. body标签

    1
    2
    3
    <body> 
    这里是网页的主体
    </body>

    body内常用的标签

  • p标签

    1
    2
    3
    <p>
    这是一个段落，常用来换行
    </p>

  • h标签

    1
    2
    3
    <h1>这是一个标题</h1>
    <h2>这也是一个标题</h2>
    <!--最多到h5-->

  • strong标签

    1
    <strong>加粗</strong>

  • em标签

    1
    <em>斜体</em>

  • del标签

    1
    <del>中划线，效果参考打折的价格</del>

  • div标签

    1
    <div>只是一个容器，无具体功能，有利于模块化和绑定操作</div>

  • sapn标签

    1
    <span>这也是一个容器</span>

  • a标签

    1
    2
    3
    <a herf="www.baidu.com" target="_blank">这是超链接锚点，最初的作用为</a>
    <!--target的值决定是在当前页面打开链接还是在新的页面中打开页面-->
    <!--herf的值除了URL还可以是tel(打电话)和mailto(发邮件),还可以是JavaScript（协议限定符，此标识后可写java代码，用户点击时会强行运行）-->

  • br标签

    1
    <br>换行</br>

  • hr标签

    1
    <hr>这是水平线</hr>

  • ol和li标签

    1
    2
    3
    4
    5
    6
    7
    8
    <ol type="a" start="value">
    <1--value的值决定最开始的序号值-->
    <!--type的值不同，列表的样式不同,1>=序号为阿拉伯数字;I/i>=序号为小写/大写罗马数字;A/a=>序号为大小写英文字母-->
    	<li>这是一个有序列表，ol和li是一起使用的</li>
    	<li>苹果</li>
    	<li>橘子</li>
    	<li>樱桃</li>
    </ol>

  • ul和li标签

    1
    2
    3
    4
    5
    6
    7
    8
    <ul type="disc">
    <!--type的值决定无序列表的样式，具体不做叙述-->
    	<li>这是无序列表</li>
    	<li>圆</li>
    	<li>正方形</li>
    	<li>三角形</li>
    	<li>矩形</li>
    </ul>

    注：ui和li常用来做导航栏，菜单栏等功能和形式差不多，天生具有父子结构的对象

  • img标签

    1
    2
    3
    4
    <img src="图片的相对地址或绝对地址" alt="图片的摘要" title="图片的描述">
    <!--当网页文件和图片处于同一个文件夹下时，可以使用相对地址，更加简单；否则使用绝对地址才能正常加载图片-->
    <!--Alt的值是当图片无法正常加载时显示 在图片上的信息，用来改善用户体验-->
    <!--title的值是用户的鼠标放在图片上时会显示的信息-->

  • form标签

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <form method="get/post" action="发送信息的地址">
    	<input type="text" name="username"><!--这文本输入框-->
    	<input type="password" name="password"><!--这密码框-->
    	<input type="submit"><!--这是提交按钮-->
    	<input type="radio" name="xx"><!--这是当选框,只有当数个单选框的name值相同时，才会发挥单选的功能-->
    	<input type="radio" name="xx">
    	<input type="radio" name="xx">
    	<input type="checkbox" name="xxx"><!--这是复选框,只有当数个复选框的name值相同时，才会正常发挥复选的功能-->
    	<input type="checkbox" name="xxx">
    	<input type="checkbox" name="xxx">
    	<select>
    		<option>北京</option><!--这是一个下拉框-->
    		<option>上海</option>
    		<option>天津</option>
    		<option>广州</option>
    	</select>
    	<!--想要正确提交信息，必须要有name和value-->
    </form>复

标签的归类

  1. 行级元素

    feature：

    • 内容决定元素所占位置
    • 不可以通过css改变宽高

    常见的有：

    • span
    • strong
    • em
    • a
    • del

  2. 块级元素

    feature：

    • 独占一行
    • 可以通过css代码改变宽高

    常见的有：

    • div
    • p
    • ul
    • li
    • ol
    • form
    • address

  3. 行级块元素

    feature:

    • 内容决定大小
    • 可以通过css改宽高

标签类型的实质：

都是css特性的表现——对象都有一个display的css属性，display有三个属性值=>

  1. inline (行级)
  2. 2.block (块级)
  3. 3.inline-block (行级块元素)

所以标签的类型不是固定的，可以通过css代码来更改；此外，所有属性为inline的对象都具有文字特性，即空格会被视为文本分隔符即如果inline对象之间有空格/空行就会间隔一定距离。

HTML补充

  1. HTML语言中没有空格标签，所有空格都是文本分隔符，如果想要输入空格需输入&nbsp，此外，其它特殊字符还有
  • < &lt
  • > &gt
  1. HTML标签是可以嵌套的，通过嵌套可以实现各种不同的功能。
  2. html还有很多复杂的标签，但是基本上很少用，因为网络编程要求结构和样式和行为相分离，那些复杂的标签多为带有样式的标签。

CSS代码

CSS代码引入的方式

  1. 行间样式（内联），如

    1
    2
    3
    4
    5
    <div style="
    width: 100px;
    height: 100px;
    background-color: #f40"
    ></div>

  2. 页面级CSS，如

    1
    2
    3
    4
    5
    6
    7
    <style type="text/css">
    		div{
    			width: 100px;
    			height: 100px;
    			background-color: #f40;
    		}
    	</style>

  3. 外部CSS文件（最常用），如

    1
    2
    3
    4
    5
    6
    7
    8
    div{
    	
    	border:1px solid black;text-align: right;
    	text-indent: 2em;
    	cursor: ;
    	text-decoration: line-through;

    }

    但是，外部CSS文件要能作用到HTML文件上，需要在HTML文件的head中加入如下代码

    1
    <link rel="stylesheet" type="text/css" href="CSS文件地址">

浏览器的策略

  1. 浏览器从服务器下载HTML文件时，采取下载一行执行一行的形式
  2. 当执行到link CSS的代码时，浏览器会开启一个新的线程来同时下载CSS和HTML文件
  3. 在执行复杂选择器时，浏览器采用从右向左的方式，可以提高搜索的效率

CSS选择器

  1. Id选择器

    1
    2
    3
    4
    #only{
    	background-color: #ff3058
    }
    /*首先要求对象具有ID，ID是一对一唯一的标识，其中only为ID值*/

  2. class选择器

    1
    2
    3
    4
    .typeone{
    	background-color: #345564
    }
    /*对象应具有class，且class不唯一，其中typeone为class值*/

  3. 标签选择器

    1
    2
    3
    4
    div{
    	background-color: #634432
    }
    /*标签选择器会选中所有该类标签*/

  4. 通配符选择器

    1
    2
    3
    4
    *{
    	background-color: #243543;
    }
    /*此选择器会作用到全局*/

  5. 属性选择器，如

    1
    2
    3
    4
    5
    6
    7
    [id]{
    	background-color: #f84;
    }
    /*也可以指定属性值*/
    [id="only"]{
    	background-color: #f84;
    }

  6. ！important

    1
    2
    3
    4
    #only{
    	background-color: #ff3058!important
    }
    /*加上！important后，此选择器优先级最高*/

  7. 父子选择器

    1
    2
    3
    4
    5
    6
    7
    div span{
    	background-color: #567889;
    }
    #demo1 .typeone span{
    	background-color: #678980;
    }
    /*可以用来限定目标，可以套很多层，且形式不一定要一样*/

  8. 直接子元素选择器

    1
    2
    3
    4
    div > span{
    	background-color: #779
    }
    /*只会作用于字节的子类*/

  9. 并列选择器

    1
    2
    3
    4
    div.demo1{
    	background-color: #655;
    }
    /*可以用多个选择器不加空格的组合到一起，可涮选出符合所有条件的对象*/

  10. 分组选择器

    1
    2
    3
    4
    5
    6
    7
    em.demo1,
    strong #only,
    div
    {
    	background-color: #658;
    }
    /*可以实现代码的复用，把具有同样样式的选择器用逗号隔开，则可作用于所有对象*/

  11. 伪类选择器

    1
    2
    3
    4
    a:hover{
    	background-color: orange;
    }
    /*当鼠标移动到对象的领域之内时，为对象加上相应的样式，当鼠标移开后，则会移除相应的样式*/

CSS选择器的优先级和权值

  • 优先级 ！important>行间样式>ID>class|属性>标签选择器>*

  • CSS选择器的权值

    • ！important infinity
    • 行间样式 1000
    • ID 100
    • class|属性|伪类 10
    • 标签|伪元素 1
    • 通配符 0

  • CSS权重用于选择器优先级的比较，多重选择器嵌套可以将权重相加，且权重的值不为十进制而是256进制！！！

CSS代码常用属性

font-size: 50px; 设置字体的大小（实际设置字体的高）
font-weight: bold; 设置字体的粗细
font-style: italic; 斜体
font-family: arial; 设置字体样式
color: #424; 设置字体颜色
border: 1px solid black; 设置外边框的粗细、样式（直线，虚线等）和颜色
width: 100px; 设置宽
height: 100px; 设置高
text-align: right; 设置文本对齐方式（左对齐，右对齐，居中）
line-height: 20px; 单行字体行高，用以控制行间距
text-indent: 2em; 设置缩进，单位是em（当前每个字体的像素大小）
text-decoration: line-through; 对字体进行装饰，值不同样式不同（下划线，中划线，上划线等）
cursor: pointer; 设置鼠标聚焦时鼠标样式的变化

字体颜色的三种形式

  1. 纯英文单词

    1
    2
    color: green;
    color: blue;

  2. 颜色代码

    1
    2
    3
    color: #ff4400;
    color: #768798;
    color: #ff3;

  3. 颜色函数

    1
    2
    color: rgb(3,35,234);
    color: rgb(32,43,255);

    注：颜色代码是由光学三原色混合而成的（r[00-ff];g[00-ff];b[]00-ff）,所以需要六位的值来确定颜色，但是如果每两位都是一样的，则可以进行简写，即每两位并成一位；而颜色函数也是由光学三颜色合成的，但是只需要三个参数，每一位的范围是0-255.实际上颜色代码和颜色函数是等价的，只是颜色函数只是把两位十六进制数组成256进制位。

本文标题:Web Basic Skills

文章作者:ZhuMing

发布时间:2019-07-05, 16:15:57

最后更新:2019-07-05, 23:07:58

原始链接:http://zhumingcj.github.io/2019/07/05/HTML Basic Skills/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. HTML(HyperText Markup Language)、CSS和Javascript
    1. 1.1. 常用的HTML标签
      1. 1.1.0.1. head内部常用的标签
      2. 1.1.0.2. body内常用的标签
  2. 1.2. 标签的归类
  3. 1.3. HTML补充
  4. 1.4. CSS代码
    1. 1.4.0.1. CSS代码引入的方式
    2. 1.4.0.2. 浏览器的策略
    3. 1.4.0.3. CSS选择器
    4. 1.4.0.4. CSS选择器的优先级和权值
    5. 1.4.0.5. CSS代码常用属性
    6. 1.4.0.6. 字体颜色的三种形式